<template>
  <div class="page">
    <div class="containerInner">
      <div class="wrapper">
        <!--        <div class="mask"/>-->
        <div class="primary">
          <div class="group">
            <img
                class="logo" title="logo"
                src="../assets/img/pistachio.png"
            />
            <div class="view">
              <span class="courses">Courses</span>
              <span class="features">Features</span>
              <span class="support">Support</span>
            </div>

          </div>
          <span class="title"
          >Keep smile while feeling down</span
          >
          <div class="group1" v-show="true">

            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
              <el-form-item label="账户：" prop="name">
                <el-input v-model="form.userName" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item label="密码：" prop="pass">
                <el-input placeholder="请输入密码" v-model="form.password" show-password clearable></el-input>
              </el-form-item>
              <el-form-item label="验证码：" v-show="false">
                <el-input placeholder="请输入验证码" v-model="form.code"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm">立即登录</el-button>
                <el-button @click="registerForm">立即注册</el-button>
              </el-form-item>
            </el-form>

          </div>

        </div>
        <img
            class="longBanner"
            src="../assets/img/login_3.png"
        />
      </div>
    </div>
  </div>
</template>
<script>


export default {
  components: {},
  data() {
    return {
      constants: {},
      form: {
        userName: '',
        password: '',
        code: '',
      },
    // 输入框规则
      rules: {
        name: [
          {required: true, message: '请输入账户',trigger: 'change' },
        ],
        pass: [
          {required: true, message: '检查密码输入', trigger: 'change'},
          {min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    submitForm() {
      // 登陆提交
    },
    registerForm() {
      // 注册提交
    }
  },

}
</script>

<style src="./css/Login.css" scoped/>
;
